<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/1.0.26/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.3/vue-resource.min.js"></script>
</head>
<body>
<div id="all">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">弹窗</h4>
                </div>
                <div class="modal-body">
                        sss
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
<div id="appInfo"  class="panel panel-default">
    <div class="panel-heading">appKey</div>
    <div class="panel-body">
        wnjk#chat
    </div>
</div>
<div id="createAccount"  class="panel panel-default">
    <div class="panel-heading">创建账号/更新密码（如果账号已存在，则更新密码）</div>
    <div class="panel-body">
        <div class="input-group">
            <form id="createAccountForm">
            <input type="text" class="form-control" name="username" placeholder="username" aria-describedby="basic-addon1">
            <input type="text" class="form-control" name="password" placeholder="password" aria-describedby="basic-addon1">
            </form>
            <button class="btn btn-default" v-on:click="createAccount">提交</button>
            <span class="form_error"></span>
        </div>
    </div>
</div>
<div id="accountList"  class="panel panel-default">
    <div class="panel-heading" >账号列表
        <button class="btn btn-default" type="button" v-on:click="getAccountList">点击获取账号列表</button>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item" v-for="acc in accountList">
                用户名：{{acc}}
                <span class="label label-success" data-user="{{acc}}" v-on:click="getUserInfo">点击查看详情</span>
                <span class="{{acc}}"></span>
            </li>
        </ul>
    </div>
</div>
    <div id="groupList"  class="panel panel-default">
        <div class="panel-heading" >
            群组列表
            <button class="btn btn-default" type="button" v-on:click="getGroupList">点击获取群组列表</button>
        </div>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item" v-for="g in groupListData">
                    名称：{{g.name}} &nbsp
                    ID: {{g.groupId}} &nbsp
                    描述：{{g.description}} &nbsp
                    创建者:{{g.owner}} &nbsp
                    maxMembers:{{g.maxMembers}} &nbsp
                    needApproveToJoin:{{g.needApproveToJoin}} &nbsp
                    canMemberInviteOthers:{{g.canMemberInviteOthers}}&nbsp <br>
                    <button v-on:click="getGroupUsers" data-group="{{g.groupId}}">查看成员</button>
                    <br>
                    <span id="g_admin_{{g.groupId}}"></span>
                    <span id="g_member_{{g.groupId}}"></span>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    var all = new Vue({
        el: '#all',
        data: {
            accountList:[
            ],
            groupListData:[]
        },
        created:function(){
        },
        methods:{
            getAccountList:function (){
                this.$http.get("accountList").then(
                    function(res){
                        console.log(res);
                        this.$data.accountList=res.body
                    }
                )
            },
            getGroupList:function (){
                this.$http.get("groupList").then(
                    function(res){
                        console.log(res);
                        this.$data.groupListData=res.body
                    }
                )
            },
            createAccount:function(){
                $.post("createAccount",$("#createAccountForm").serialize(),function(data){
                    if(data=="saveSuccess"){
                        alert("保存成功");
                        window.location.reload();
                    }else if(data=="updateSuccess"){
                        alert("密码更新成功")
                    }else{
                       alert("保存失败："+data);

                    }
                });
            },
            getUserInfo:function (event){
                console.log(event);
                var user = event.currentTarget.attributes["data-user"].value;
                $.get("userInfo?username="+user,function (data){
                    $("."+user).html(JSON.stringify(data));
                })
            },
            getGroupUsers:function(event){
                var groupId = event.target.dataset["group"];
                $.get("groupUsers?groupId="+groupId,function (data){
                    $("#g_admin_"+groupId).html("管理员"+JSON.stringify(data.admins));
                    $("#g_member_"+groupId).html("群成员"+JSON.stringify(data.members));
                })
                // $('#myModal').modal('show');
            }
        }
    })
</script>
</body>
</html>